<template>
  <div class="body_bgi full bgs_full">
    <big-screen-header :headerName="'' + `${countyName}`" />

    <div class="content_box w_full h_full-100 flex_row_around p_10 border_box">
      <!-- 1 -->
      <div class="w_30_p h_full flex_column_between">
        <div class="w_full h_49_p chart_box_bgi_1 p_20">
          <data-chart 
            title="银行贷款金额 3354 万元"
            path=''
            chartType="环状图"
            :chartData="chartData1" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>

        <div class="w_full h_49_p chart_box_bgi_1 p_20">
          <div class="main_color fw_bold fs_20 ls_2 flex_row_start flex_center">
            <div class="w_1 h_20 main_bgc main_border mr_10"></div>金融保险
          </div>

          <div class="w_full h_full-50 fs_24 mt_20">
            <div class="mb_10"><span class="main_color">已受信额度</span> <span class="color_orange">24.5 万元</span></div>
            <div class="mb_10"><span class="main_color">推广乡镇</span> <span class="color_orange">2 个</span></div>
            <div class="mb_10"><span class="main_color">以确定人选的嘎查村</span> <span class="color_orange">8 个</span></div>
            <div class="mb_10"><span class="main_color">推广农牧民</span> <span class="color_orange">23 个</span></div>
          </div>
        </div>
      </div>

      <!-- 2 -->
      <div class="w_40_p h_full flex_column_between">
        <div class="full bgs_full map_box_bgi">
          <countyMap :countyName="countyName" />
        </div>
      </div>

      <!-- 3 -->
      <div class="w_30_p h_full flex_column_between">
        <!-- xxx 镇 所有嘎查村列表 -->
        <div class="w_full h_49_p bgs_full chart_box_bgi_1 p_20">
          <data-chart 
            title="农牧户贷款占比"
            path=''
            chartType="环状图"
            :chartData="chartData3" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>

        <!-- xxx 镇 牧户养殖排行 -->
        <div class="w_full h_49_p bgs_full chart_box_bgi_1 p_20">
          <data-chart 
            title="农牧户贷款金额情况"
            path=''
            chartType="柱状图3"
            :chartData="chartData4" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defMixin from '@/mixins/def';
import componentsMixin from '@/mixins/components.js'


export default {
  name: 'countyPage',
  mixins: [defMixin, componentsMixin],
  components: { },
  data() {
    return {
      countyName: '',

      chartData1: {},
      chartData2: {},
      chartData3: {},
      chartData4: {},

    };
  },
  async mounted() {
    let countyName = this.$route.params.countyName;

    this.countyName = countyName;

    this.initChart()
  },
  methods: {

    initChart() {
      this.chartData1 = {
        unit: '只',
        data: [
          { name: '中国银行', value: 330.00 },
          { name: '农业银行', value: 420.00 },
          { name: '工商银行', value: 400.00 },
          { name: '建设银行', value: 360.00 },
          { name: '其他银行', value: 290.00 },
        ]
      }

      this.chartData2 = {
        unit: '只',
        data: [
          { name: '种公羊', value: 1834 },
          { name: '种母羊', value: 1750 },
        ]
      }

      this.chartData3 = {
        unit: '%',
        data: [
          { name: '农户', value: 34 },
          { name: '牧户', value: 66 },
        ]
      }

      this.chartData4 = {
        unit: '万元',
        x: ['阿拉腾陶格斯', '乌宁夫', '照日格图', '达布希拉图', '巴音都仁', '敖特根', '阿拉腾森布尔', '萨日娜'].reverse(),
        y: [3.6, 3.2, 3.0, 2.7, 2.5, 2.2, 2.2, 1.3].reverse()
      }
    },

    
    // 点击旗县
    clickCountyMap(townName) {
      this.goToPage(`/townPage/${townName}`)
    },

    // 跳转页面 
    goToPage(val) {
      this.$router.push({
        path: val
      })
    },

  }
}
</script>